<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%"
                >
            <el-table-column
                    type="index"
                    label="#"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="_id"
                    label="商品id"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="name"
                    :show-overflow-tooltip="true"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="category"
                    label="类别"
                    width="180">
                <template slot-scope="scope">
                    <span>{{codeToTxt(scope.row.category)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="describe"
                    label="描述"
                    width="500"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    prop="stock"
                    label="库存"
                    width="120"
            >
            </el-table-column>
            <el-table-column
                    prop="isSell" label="上架状态"
                    width="150"
            >
                <template slot-scope="scope">
                    <el-switch
                            on-text ="是"
                            off-text = "否"
                            on-color="#5B7BFA"
                            off-color="#dadde5"
                            v-model="scope.row.isSell"
                            @change="changSell(scope)"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="90">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit(scope)">编辑</el-button>
                    <el-button type="text" size="small" @click="delGoods(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {sendwithpost} from "network/profile";
import {debounce} from "../../../../common/util";

export default {
        name: "GoodTable",
        props: {
            allGoods: {
                type: Array
            },
            searchName: {
                type: String,
            }
        },
        computed: {
            tableData() {
                const { searchName, allGoods} = this;
                return allGoods.filter(data=> {
                    return data.name.includes(searchName);
                })
            },

        },
        methods: {
            changSell(scope) {
                sendwithpost({
                    url: '/changesell',
                    data: {
                        id: scope.row._id,
                        isSell: scope.row.isSell
                    }
                }).then(res=>{
                    console.log(this)
                })
            },
            delGoods(scope) {
                if (confirm(`您确定要删除${scope.row.name}么？`)) {
                    debounce(sendwithpost({
                        url: '/delgoods',
                        data: {
                            id: scope.row._id
                        }
                    }).then(res=> {
                        if (res.data.res_code === 2) {
                            this.$store.commit('delGoods', scope.$index)
                            this.$message({
                                showClose: true,
                                type: 'warning',
                                message: '删除成功！'
                            })
                        }
                    }))
                }


            },
            edit(scope) {
                this.$emit('changeGoods',scope);
            },
            codeToTxt(arr) {
                let str = ''
                  this.$store.state.goodsType.find(item=> {
                    if (item.value == arr[0]) {
                        item.children.find(item=> {
                            if (item.value == arr[1]) {
                               return  str = item.label
                            }
                        })
                        str =  item.label + '/' + str ;
                    }
                })
                return str
            }
        }

    }
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }

</style>